<%@ page language="java"  pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/views/common/taglib.jsp" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>订单详情</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <%@ include file="/WEB-INF/views/common/resource.jsp" %>
    <script>
        var ctx = '${ctx}';
    </script>
</head>
<body>
<div class="pop_bg"></div>
<div class="pop_box np" id="qrsh_box">
    <img src="${itx}/images/pop_box_bg.png" width="100%" />
    <div class="qr_box">
        <p>订单号${order.order_no}</p>
        <span>待收货</span><br>
        <div class="qr_img_box" id="qrcode"></div>
    </div>
    <p style="margin: 10% 0;">配送员扫描二维码成功<br/>则表明这单交易完成</p>
    <em class="close_pop"><img src="${itx}/images/close_icon.png" width="35" /></em>
</div>
<div class="pop_box np" id="qrsh_complete_box">
    <img src="${itx}/images/pop_box_bg1.png" width="100%" />
    <em class="close_pop"><img src="${itx}/images/close_icon.png" width="35" /></em>
</div>


<div class="page order pt0">
    <div class="order_detil_head">
        <h1>订单号${order.order_no}</h1>

        <c:if test="${order.order_status eq 'WAITING_FOR_RECEIVING_ORDER'}">
            <span class="stay">待接单</span>
        </c:if>

        <c:if test="${order.order_status eq 'WAITING_FOR_DELIVERY'}">
            <span class="stay">待收货</span>
        </c:if>

        <c:if test="${order.order_status eq 'FINISHED'}">
            <span class="stay">已完成</span>
        </c:if>

        <c:if test="${order.order_status eq 'CLOSED'}">
            <span class="stay">已关闭</span>
        </c:if>

    </div>
    <div class="order_detil_content">
        <div class="order_detil_infobox">
            <strong>${order.receiver}</strong><span>${order.mobile}</span>
            <p><i class="iconfont icon-site2"></i>${order.address}</p>
        </div>
        <div class="order_detil_infobox">
            <h1>商品清单</h1>
            <ul class="order_detil_prolist">

                <c:forEach var="detail" items="${order.order_details}">
                    <li>
                        <c:if test="${detail.type eq 'GIVEAWAY'}">
                            <div class="free_info_box">
                                <em>赠</em>
                                <span>${detail.goods_name}</span>
                            </div>
                        </c:if>
                        <div class="pro_img_box"><img src="${detail.goods_img}" width="70" height="70" /></div>
                        <div class="pro_info_box">
                            <strong>${detail.goods_name}</strong>
                            <span>¥${detail.goods_price}</span>
                        </div>
                        <div class="pro_info_box bottom">
                            <em>规格：${detail.goods_specifications}</em>
                            <span>X${detail.goods_num}</span>
                        </div>
                    </li>
                </c:forEach>

            </ul>
            <div class="pro_total_box">
                <span>共${fn:length(order.order_details)}件</span>
                <span>配送费：¥0</span>
                <c:choose>
                    <c:when test="${order.is_price_off eq 1}">
                        <strong>已减¥${order.off_price} 总计：¥${order.order_price}</strong>

                    </c:when>

                    <c:otherwise>
                        <strong>总计：¥${order.order_price}</strong>
                    </c:otherwise>
                </c:choose>

            </div>
        </div>
        <div class="order_detil_infobox">
            <dl>
                <dt>支付方式</dt>
                <dd>货到付款</dd>
            </dl>
            <dl>
                <dt>交易时间</dt>
                <dd>${order.create_time}</dd>
            </dl>
        </div>
        <div class="order_detil_infobox">
            <strong>为您配送的送货商：</strong>
            <div class="dealer_info_box">
                <span>${mep.mep_name}</span>
                <p><i class="iconfont icon-site2"></i>${mep.address}</p>
            </div>
        </div>
        <div class="clear"></div>


    <c:if test="${order.order_status eq 'WAITING_FOR_RECEIVING_ORDER'}">
        <div class="bottom_btns" ><a href="tel:${mep.mep_mobile}">联系经销商</a></div>
    </c:if>

    <c:if test="${order.order_status eq 'WAITING_FOR_DELIVERY'}">
        <div class="bottom_btns" >
            <ul>
                <li><a href="tel:${mep.mep_mobile}">联系经销商</a></li>
                <li id="qrsh">确认收货</li>
            </ul>
        </div>
    </c:if>


    <c:if test="${order.order_status eq 'FINISHED'}">
        <div class="order_detil_infobox">
            <div class="evaluate_box">
                <h1>我的评价</h1>
                <dl>
                    <dt>配送速度：</dt>
                    <dd id="speed">
                        <input type="checkbox" id="eva_speed1" name="speed" />
                        <label for="eva_speed1"></label>
                        <input type="checkbox" id="eva_speed2" name="speed" />
                        <label for="eva_speed2"></label>
                        <input type="checkbox" id="eva_speed3" name="speed" />
                        <label for="eva_speed3"></label>
                        <input type="checkbox" id="eva_speed4" name="speed" />
                        <label for="eva_speed4"></label>
                        <input type="checkbox" id="eva_speed5" name="speed" />
                        <label for="eva_speed5"></label>
                    </dd>
                </dl>
                <dl>
                    <dt>服务态度：</dt>
                    <dd id="attitude">
                        <input type="checkbox" id="eva_attitude1" name="attitude" />
                        <label for="eva_attitude1"></label>
                        <input type="checkbox" id="eva_attitude2" name="attitude" />
                        <label for="eva_attitude2"></label>
                        <input type="checkbox" id="eva_attitude3" name="attitude" />
                        <label for="eva_attitude3"></label>
                        <input type="checkbox" id="eva_attitude4" name="attitude" />
                        <label for="eva_attitude4"></label>
                        <input type="checkbox" id="eva_attitude5" name="attitude" />
                        <label for="eva_attitude5"></label>
                    </dd>
                </dl>
                <dl>
                    <dt>商品完好度：</dt>
                    <dd id="integrity">
                        <input type="checkbox" id="eva_integrity1" name="integrity" />
                        <label for="eva_integrity1"></label>
                        <input type="checkbox" id="eva_integrity2" name="integrity" />
                        <label for="eva_integrity2"></label>
                        <input type="checkbox" id="eva_integrity3" name="integrity" />
                        <label for="eva_integrity3"></label>
                        <input type="checkbox" id="eva_integrity4" name="integrity" />
                        <label for="eva_integrity4"></label>
                        <input type="checkbox" id="eva_integrity5" name="integrity" />
                        <label for="eva_integrity5"></label>
                    </dd>
                </dl>
            </div>
            <textarea id="evaluate_content"></textarea>
        </div>
        <c:choose>
            <c:when test="${order.customer_evaluate_status > 0}">
                <div class="bottom_btns">
                      <a href="tel:${mep.mep_mobile}" style="color: white">联系经销商</a>
                </div>
            </c:when>
            <c:otherwise>
                <div class="bottom_btns">
                    <ul>
                        <li> <a href="tel:${mep.mep_mobile}">联系经销商</a></li>
                        <li onclick="doEvaluate()">服务评价</li>
                    </ul>
                </div>
            </c:otherwise>
        </c:choose>

    </c:if>


    <c:if test="${order.order_status eq 'CLOSED'}">
        <div class="bottom_btns" style="position: static;">
             订单已经关闭
        </div>
    </c:if>

    </div>

</div>
</body>
<script src="${ctx}/js/qrcode.js"></script>
<script type="text/javascript">
    $('.evaluate_box dl dd input').click(function(){
        switch ($(this).index()){
            case 0:
                $(this).parent().find('input').eq(0).prop("checked", true);
                $(this).parent().find('input').eq(1).prop("checked", false);
                $(this).parent().find('input').eq(2).prop("checked", false);
                $(this).parent().find('input').eq(3).prop("checked", false);
                $(this).parent().find('input').eq(4).prop("checked", false);
                break;
            case 2:
                $(this).parent().find('input').eq(0).prop("checked", true);
                $(this).parent().find('input').eq(1).prop("checked", true);
                $(this).parent().find('input').eq(2).prop("checked", false);
                $(this).parent().find('input').eq(3).prop("checked", false);
                $(this).parent().find('input').eq(4).prop("checked", false);
                break;
            case 4:
                $(this).parent().find('input').eq(0).prop("checked", true);
                $(this).parent().find('input').eq(1).prop("checked", true);
                $(this).parent().find('input').eq(2).prop("checked", true);
                $(this).parent().find('input').eq(3).prop("checked", false);
                $(this).parent().find('input').eq(4).prop("checked", false);
                break;
            case 6:
                $(this).parent().find('input').eq(0).prop("checked", true);
                $(this).parent().find('input').eq(1).prop("checked", true);
                $(this).parent().find('input').eq(2).prop("checked", true);
                $(this).parent().find('input').eq(3).prop("checked", true);
                $(this).parent().find('input').eq(4).prop("checked", false);
                break;
            case 8:
                $(this).parent().find('input').eq(0).prop("checked", true);
                $(this).parent().find('input').eq(1).prop("checked", true);
                $(this).parent().find('input').eq(2).prop("checked", true);
                $(this).parent().find('input').eq(3).prop("checked", true);
                $(this).parent().find('input').eq(4).prop("checked", true);
                break;
        }
    })

    $('.pop_bg').click(function(e){
        $('.pop_bg').hide();
        $('.pop_box').hide();
    })

    $('#close').click(function(e){
        $('.pop_bg').hide();
        $('.pop_box').hide();
    })

    $('.close_pop').click(function(e){
        $('.pop_bg').hide();
        $('.pop_box').hide();
    })

    $('#qrsh').click(function(e){
        $('.pop_bg').height($(document).height());
        $('.pop_bg').show();
        $('#qrsh_box').show();
    });


    function doEvaluate() {
        var speed_score = $("input[type=checkbox][name='speed']:checked").length;

        var courier_score = $("input[type=checkbox][name='attitude']:checked").length;

        var goods_score = $("input[type=checkbox][name='integrity']:checked").length;

        if(speed_score>0 && courier_score>0 && goods_score>0){
            $.ajax({
                type: "post",
                url: '/shop/doEvaluate.do',
                dataType: "json",
                data: {
                    'speed_score':speed_score,
                    'courier_score':courier_score,
                    'goods_score':goods_score,
                    'order_no':'${order.order_no}',
                    'evaluate_content':$('#evaluate_content').val(),
                    'courier_id':'${order.courier_id}'
                },
                success: function(resp){
                    console.log(resp);
                    if(resp.result==="success"){
                        alertTips("提交评价成功！");
                    }else{
                        console.log("get_order_message_error!");
                    }
                }
            });
        }else{
            alertTips("请选择评分！");
        }
    }


    $(document).ready(function(){
        showQRCode();
        $('.qr_img_box').find('img').css("width","100%");
        var evaluate_status = parseInt('${order.customer_evaluate_status}');
        if(evaluate_status>0){
            showScore();
        }
    });


    function showScore() {
        var speed_score = parseInt('${order.speed_score}');

        var courier_score = parseInt('${order.courier_score}');

        var goods_score = parseInt('${order.goods_score}');

        var evaluate_content  = '${order.evaluate_content}';

        var html1="";
        for(var i=1;i<6;i++){
            if(i<=speed_score){
                html1 = html1+"<input checked='checked' type=\"checkbox\" id=\"eva_speed"+i+"\"  />\n" +
                    "<label for=\"eva_speed"+i+"\"></label>";
            }else{
                html1 = html1+"<input type=\"checkbox\" id=\"eva_speed"+i+"\"  />\n" +
                    "<label for=\"eva_speed"+i+"\"></label>";
            }

        }
        var html2="";
        for(var i=1;i<6;i++){
            if(i<=courier_score){
                html2 = html2+"<input checked='checked' type=\"checkbox\" id=\"eva_attitude"+i+"\"  />\n" +
                    "<label for=\"eva_attitude"+i+"\"></label>";
            }else{
                html2 = html2+"<input type=\"checkbox\" id=\"eva_attitude"+i+"\"  />\n" +
                    "<label for=\"eva_attitude"+i+"\"></label>";
            }
        }
        var html3="";
        for(var i=1;i<6;i++){
            if(i<=goods_score){
                html3 = html3+"<input checked='checked' type=\"checkbox\" id=\"eva_integrity"+i+"\"  />\n" +
                    "<label for=\"eva_integrity"+i+"\"></label>";
            }else{
                html3 = html3+"<input type=\"checkbox\" id=\"eva_integrity"+i+"\"  />\n" +
                    "<label for=\"eva_integrity"+i+"\"></label>";
            }
        }

        $('#speed').html(html1);
        $('#attitude').html(html2);
        $('#integrity').html(html3);
        $('#evaluate_content').val(evaluate_content);
    }

    function showQRCode() {
        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width : 140,//设置宽高
            height : 140
        });
        qrcode.makeCode("${order.check_code}");
    }

    function getOrderStatus() {
        
    }

</script>
</html>
